<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    #login-form{
        position: absolute;
        left: 32%;
        width: 354px;
        font-family: "Microsoft Yahei","微软雅黑",Arial,STHeiti;
        border: 1px solid #efefef;
        box-shadow: 1px 1px 1px #efefef;
        padding-top: 25px;
        background-color: blanchedalmond;
    }
</style>
<body>
    <div id="login-form">
        <p style="font-size: 20px">学生管理系统</p>
        <p><input name="username" v-model="username" type="text" placeholder="手机/邮箱/用户名"></p>
        <p><input name="password" v-model="password" type="password" placeholder="密码"></p>
        <p><input type="button" value="登录" @click="login"> <input type="button" value="注册" @click="checkUserName"></p>
    </div>
</body>
<script>
    new Vue({
        "el": "#login-form",
        "data":{
            "username":"",
            "password":""
        },
        "methods": {
            "checkUserName"(){
                //1.获取用户输入的用户名
                var username = this.username;
                var password = this.password;
                //2.转换为params，后台servlet才可以接收到vue提交的参数
                let params = new URLSearchParams();
                params.append("username",username);
                params.append("password",password);
                //3.发送post方式的ajax请求
                axios.post("/student_system/register", params).then(function(response){
                    alert(response.data)
                },function(error){})
            },
            "login"(){
                var username = this.username;
                var password = this.password;
                //2.转换为params，后台servlet才可以接收到vue提交的参数
                let params = new URLSearchParams();
                params.append("username",username);
                params.append("password",password);
                //3.发送post方式的ajax请求
                axios.post("/student_system/login", params).then(function(response){
                    if(response.data == "登录成功"){
                        alert("登录成功");
                        location.href='/student_system/listStu';
                    }else{
                        alert(response.data);
                    }
                },function(error){})
            }
        }

    })
</script>
</html>